<template>
	<view>
		<view class="xm-flex-c xm-justify-center xm-align-content-center xm-brr-20rpx"
			style="background-color: #FFFFFF;width: 100%;height: auto;align-items: center;padding: 30rpx;">
			<view class="xm-flex-r xm-justify-between"
				style="align-items: center;width: 90%;height: 157rpx;margin-top: 68rpx;margin-bottom: 30rpx;">
				<view class="">
					点击图片更换头像
				</view>
				<image src="https://img0.baidu.com/it/u=19766716,3349517949&fm=26&fmt=auto" mode="widthFix"
					style="width: 157rpx;border-radius: 157rpx;background-color: #26ACD4;"></image>
			</view>

			<view class="" style="width: 90%;">
				点击修改名称
			</view>

			<input type="text" value="" placeholder="昵称" v-model="data.name"
				style="margin-top: 30rpx;margin-bottom: 30rpx;width: 90%;border-bottom: 4rpx #a6a2a2 solid;padding: 15rpx;border-radius: 0rpx;padding-left: 20rpx;" />


			<view class="" style="width: 90%;">
				点击修改联系电话
			</view>
			<input type="text" value="" placeholder="联系电话" v-model="data.teleplone"
				style="margin-top: 30rpx;margin-bottom: 30rpx;width: 90%;border-bottom: 4rpx #a6a2a2 solid;padding: 15rpx;border-radius: 0rpx;padding-left: 20rpx;" />

			<view class="xm-flex-r" style="width: 90%;margin-bottom: 30rpx;">
				点击选择性别
				<checkbox-group style="margin-left: 30rpx;" @change="checkboxChange">
					
					<label style="margin-right: 30rpx;" v-for="(item,value) in ['男','女']" :key="value">
						<checkbox :value="item" :checked="value==type"/>{{item}}
					</label>
					
				</checkbox-group>
			</view>

			<view class="" style="width: 90%;">
				点击修改证件号
			</view>
			<input type="text" value="" placeholder="证件号" v-model="data.usercd"
				style="margin-top: 30rpx;margin-bottom: 30rpx;width: 90%;border-bottom: 4rpx #a6a2a2 solid;padding: 15rpx;border-radius: 0rpx;padding-left: 20rpx;" />


			<view class="xm-but" hover-class="but-selct" @click="update()"
				style="text-align: center;width: 70%;height: 70rpx;line-height: 70rpx;border-radius: 20rpx;margin-top: 60rpx;color: #FFFFFF;">
				确认修改
			</view>

			<view class="xm-flex-r xm-justify-between"
				style="align-items: center;width: 90%;margin-top: 30rpx;margin-bottom: 100rpx;">
				<!-- 				<view class="xm-fontsize-15" style="color: #555555;">
					忘记密码
				</view>
				<view class="xm-fontsize-15" style="color: #555555;">
					注册用户
				</view> -->
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:0,
				data:undefined
			}
		},
		onShow() {
			uni.getStorage({
				key:"token",
				success:data=>{
					console.log(data.data);
					this.id=data.data
				}
			})
			this.findon()
		},
		methods: {
			checkboxChange(data){
				console.log(data);
				if(this.type==1){
					this.type = 0
				}else{
					this.type =1
				}
				console.log(this.type);
			},
			findon(){
				// console.log("ads");
				this.$http("http://127.0.0.1:4399/user/findone", "post",
				{
					id:this.id,
					}, {
					'content-type': 'application/json'
				}).then(res=>{
					this.data = res.data
					console.log(this.data);
				})
			},
			update(){
				this.$http("http://127.0.0.1:4399/user/update", "post",this.data,
				{
					id:this.id
				}, {
					'content-type': 'application/json'
				}).then(res=>{
					// this.data = res.data
					// console.log(this.data);
					console.log(res);
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #C0C0C0;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.xm-but {
		background: linear-gradient(to right, #26acd4, #d6d6d6);
	}
</style>
